import { Suspense, lazy } from 'react'
import { Routes, Route } from 'react-router-dom'
import Layout from './layout/Layout'
import Loading from './layout/Loading'

// 使用 React.lazy 进行动态导入
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))
const Contact = lazy(() => import('./pages/Contact'))

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route 
          index 
          element={
            <Suspense fallback={<Loading />}>
              <Home />
            </Suspense>
          } 
        />
        <Route 
          path="about" 
          element={
            <Suspense fallback={<Loading />}>
              <About />
            </Suspense>
          } 
        />
        <Route 
          path="contact" 
          element={
            <Suspense fallback={<Loading />}>
              <Contact />
            </Suspense>
          } 
        />
      </Route>
    </Routes>
  )
}

export default App
